<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="审核状态">
          <el-select
            v-model="listQuery.auditStatusOptions"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="项目货号">
          <el-input v-model="listQuery.goodsCode" type="text" size="mini" />
        </el-form-item>
        <el-form-item label="项目简称">
          <el-input v-model="listQuery.goodsAbbr" type="text" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="mini"
            round
            type="primary"
            icon="el-icon-search"
            @click="search"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="openCreateDialog()"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="list"
        align="left"
        highlight-current-row
        default-expand-all
        row-key="rowKey"
        height="600"
        header-cell-class-name="custome-el-table-header-cell2"
        cell-class-name="custome-el-table-cell2"
      >
        <el-table-column label="状态" prop="status" width="100px" fixed="left">
          <template slot-scope="{ row }">
            <span v-for="(item, index) in statusOptions" :key="item.key">
              <el-tag
                v-if="item.key === row.status"
                :type="
                  row.status === 1
                    ? 'success'
                    : row.status === 2
                      ? 'danger'
                      : 'info'
                "
              >{{ item.value }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="审核状态"
          prop="auditStatus"
          width="100px"
          fixed="left"
        >
          <template slot-scope="{ row }">
            <span v-for="(item, index) in auditStatusOptions" :key="item.key">
              <el-tag
                v-if="item.key === row.auditStatus"
                :type="
                  row.auditStatus === 1
                    ? 'success'
                    : row.auditStatus === 2
                    ? 'danger'
                    : row.auditStatus === 3
                    ? 'warning'
                    : 'info'
                "
                >{{ item.value }}</el-tag
              >
            </span>
          </template>
        </el-table-column> -->
        <el-table-column
          label="项目货号"
          prop="goodsCode"
          width="150px"
          fixed="left"
        />
        <el-table-column
          label="项目简称"
          prop="goodsAbbr"
          width="150px"
          fixed="left"
        />
        <el-table-column label="物料明细" width="80" align="right" fixed="left">
          <template slot-scope="{ row }">
            <span v-if="row.goodsList">{{ row.goodsList.length }}</span>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="20" fixed="left">
          <template slot-scope="{ row }">
            <div v-if="row.goodsList && row.goodsList.length > 0">
              <el-col :span="18">
                <el-table
                  :data="row.goodsList"
                  border
                  header-cell-class-name="custome-el-table-header-cell"
                  cell-class-name="custome-el-table-cell"
                >
                  <el-table-column
                    label="识别码"
                    prop="goodsFullCode"
                    width="150px"
                    align="center"
                  />
                  <el-table-column
                    label="货号"
                    prop="goodsCode"
                    width="150px"
                    align="center"
                  />
                  <el-table-column
                    label="货品简称"
                    prop="goodsAbbr"
                    width="150px"
                    align="center"
                  />
                  <el-table-column
                    label="规格"
                    prop="specification"
                    width="100px"
                    align="center"
                  />
                  <el-table-column
                    label="批号"
                    prop="goodsBatchCode"
                    width="100px"
                    align="center"
                  />
                  <el-table-column
                    label="浓度"
                    prop="goodsBatchCode"
                    width="100px"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.concentration">
                        {{ scope.row.concentration }}
                        {{ scope.row.concentrationUnit }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="生产日期"
                    prop="productionDate"
                    width="100px"
                    align="center"
                  />
                  <el-table-column
                    label="失效日期"
                    prop="expirationDate"
                    width="100px"
                    align="center"
                  />
                  <el-table-column
                    label="单位用量"
                    width="100px"
                    align="center"
                  >
                    <template slot-scope="{row}">
                      <span v-if="row.count">
                        {{ row.count }}{{ row.unit }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" min-width="100px" />
        <el-table-column label="备注" prop="memo" min-width="100px" />
        <el-table-column label="创建人" prop="createUserName" width="100px" />
        <el-table-column label="创建时间" prop="auditTime" width="160px" />
        <el-table-column label="更新人" prop="updateUserName" width="100px" />
        <el-table-column label="更新时间" prop="updateTime" width="160px" />
        <el-table-column
          label="审核意见"
          prop="auditContent"
          min-width="100px"
        />
        <!-- <el-table-column label="审核人" prop="auditUserName" width="100px" />
        <el-table-column label="审核时间" prop="auditTime" width="160px" /> -->
        <el-table-column label="操作" align="center" width="80px" fixed="right">
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item
                  v-if="row.status === 1"
                  @click.native="setBlockUp(row, 2)"
                >
                  停用
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="row.status !== 1"
                  @click.native="setBlockUp(row, 1)"
                >
                  启用
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="row.auditStatus !== 3"
                  @click.native="openEditDialog(row)"
                >
                  编辑
                </el-dropdown-item>
                <el-dropdown-item @click.native="copy(row)">
                  复制
                </el-dropdown-item>

                <!-- <el-dropdown-item
                  v-if="row.auditStatus !== 3 && row.auditStatus !== 1"
                  @click.native="openAudit(row)"
                >
                  提交审核
                </el-dropdown-item> -->
                <el-dropdown-item @click.native="remove(row)">
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getBomDataList"
      />
      <Save
        :visible.sync="dialogVisible"
        :dialog-status="dialogStatus"
        :scope="scope"
        :current-row="currentRow"
        @saveData="handleSaveData"
      />
    </div>
    <AuditDialog
      :visible.sync="auditDialogVisible"
      dialog-status="bom"
      :current-row="auditFrom"
      @updateData="getBomDataList"
    />
  </div>
</template>

<script>
import AuditDialog from '@/views/manufacture/components/auditDialog'
import Pagination from '@/components/Pagination'
import Save from './components/save'
import { fromBase64X } from '@/utils/string-util'

import { pageBom, updateBom, copyBom, deleteBom } from '@/api/base/bom'
import { formatEmbedRow } from '@/utils/array-util'
import { bomListPreOptions } from '@/api/base/bom.js'
export default {
  components: {
    Pagination,
    Save,
    AuditDialog
  },
  data() {
    return {
      scope: fromBase64X(this.$route.params.scope, 1),
      listLoading: false,
      total: 0,
      list: [{}],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        withGoods: true,
        scope: fromBase64X(this.$route.params.scope, 1),
        withEquipment: true
      },
      currentRow: null,
      dialogVisible: false,
      dialogStatus: null,
      statusOptions: [],
      auditStatusOptions: [],

      auditDialogVisible: false,

      auditFrom: { auditStatus: '1', auditComment: '' },
      rules: {
        auditComment: [
          { required: true, message: '意见不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async mounted() {
    const { data } = await bomListPreOptions()
    this.statusOptions = data.status
    this.auditStatusOptions = data.auditStatus
    this.getBomDataList()
  },
  methods: {
    getBomDataList(val) {
      if (val) {
        this.auditDialogVisible = false
      }
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      this.listLoading = true
      pageBom(this.listQuery)
        .then((response) => {
          this.list = formatEmbedRow(response.data.rows)
          this.total = response.data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    search() {
      this.listQuery.pageNumber = 1
      this.getBomDataList()
    },
    view(row) {
      console.log(row)
    },
    openCreateDialog() {
      this.dialogVisible = true
      this.dialogStatus = 'create'
    },
    openEditDialog(row) {
      console.log(row)
      this.currentRow = row
      this.dialogVisible = true
      this.dialogStatus = 'update'
    },
    handleSaveData(data) {
      if (this.dialogStatus === 'create') {
        this.search()
      } else {
        const index = this.list.findIndex((v) => v.goodsId === data.goodsId)
        this.list.splice(index, 1, data)
      }
    },
    openAudit(row) {
      console.log(row, 'riririri')
      this.auditDialogVisible = true
      this.auditFrom = row
    },
    // val 1:为启用 2为停用
    setBlockUp(row, val) {
      this.$confirm('此操作将改变项目状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          row.status = val
          updateBom(row)
            .then((res) => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getBomDataList()
            })
            .finally(() => {
              this.getBomDataList()
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    remove(row) {
      this.$confirm('此操作将永久删除该清单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteBom({ bomId: row.bomId }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getBomDataList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    copy(row) {
      copyBom({ bomId: row.bomId }).then((res) => {
        this.$message.success('复制成功')
        this.getBomDataList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
